$(function () {
    getProCategories();
    OnaddClass();
    menuList();
    jump();
    function getProCategories() {
        var option = {
            url: HOST+'/admin/proCategories.php',
            data: {
                getType: 'ProCategories',
                num: 10
            }
        };
        $('#loading').addClass('show');
        request(option).then(function (res) {
            ProCategoriesHTML(res);
            $('#loading').removeClass('show');
        })
    }

    function ProCategoriesHTML(data) {
        var str = '';
        data.forEach(function (item) {
            str += '<div class="item" data-type="' + item.id + '">'
                + '<img src="' + item.img_src + '" alt="cate-pic">'
                + '<h4>' + item.style + '</h4>'
                + '</div>';
        });
        $('#list').html(str);
    }

    function OnaddClass() {
        $('.item').tap(function () {
            $(this).addClass('on').siblings('.item').removeClass('on');
        })
    }

    function menuList() {
        $('#menu .item').tap(function () {
            var type = $(this).attr('data-type');
            var option = {
                url:HOST+ '/admin/proCategories.php',
                data: {
                    getType: 'menuList',
                    num: 5,
                    type: type
                }
            };
            $('#loading').addClass('show');
            request(option).then(function (res) {
                ProCategoriesHTML(res);
                $('#loading').removeClass('show');
            })
        })
    }

    function jump() {
        $('#list').on('click', '.item', function () {
            var id = $(this).attr('data-type');
            console.log(id);
            window.location.href = 'proList.html?id=' + id;
        })
    }

});